<template>

  <div>

    <el-card class="tree-card">

      <div slot="header" class="clearfix">
        <!-- 用了一个行列布局 -->
        <!-- el-row 一行, el-col 一列 上面有:span属性,控制长度 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="18">
            <svg-icon icon-class="password" /> <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="6">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">负责人</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span>
                    操作
                    <!-- <i class="el-icon-arrow-down" /> -->
                  </span>
                  <!-- 下拉菜单 -->
                  <!-- <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleShowDialog">添加子部门</el-dropdown-item>
                </el-dropdown-menu> -->
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!-- 树形结构 -->
      <!-- 默认展开的简单写法 -->
      <!-- 新增--点击节点的时候不会收缩节点,方便在点击下拉菜单的时候不影响页面 -->
      <el-tree :data="departs" :props="defaultProps" default-expand-all :expand-on-click-node="false">
        <!-- 使用插槽自定义结构 -->
        <!-- 用了一个行列布局 -->
        <!-- 这里使用vue2的新插槽语法,传值data.如果使用作用域 ,使用template-->
        <!-- 作用域插槽传回来的值具体是什么,要看组件内部,而不是我想要什么就要什么,要学会打印 -->
        <!-- 在这里返回的是{data,node} -->
        <template #default="{ data, node }">
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%;">
            <el-col :span="18">
              <span @click="handleClick(data, node)">{{ data.name.trim() }}</span>
            </el-col>
            <el-col :span="6">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ data.managerName }}</el-col>
                <el-col>
                  <!-- 下拉菜单 element -->
                  <el-dropdown @command="operateDept($event,data.id)">
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <!-- 下拉菜单 -->
                    <el-dropdown-menu slot="dropdown">
                      <!-- 3.在下拉菜单中点击让弹框出现.但是弹框没有出现,是因为这个子组件想要点击事件生效,需要.native -->
                      <!-- <el-dropdown-item @click.native="handleShowDialog">添加子部门</el-dropdown-item> -->
                      <!-- 这里使用的是el-drop的指令来接收点击下拉菜单时传入的值 -->
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>

      </el-tree>
    </el-card>

    <!-- 1.添加对话框,添加和编辑共用 -->
    <!-- 对话框和el-card是平级的 -->
    <el-dialog
      :title="title[type]"
      :visible.sync="showDialog"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <!-- 上面的属性是需要传进子组件里面,所以: -->
      <add-or-edit ref="addOrEdit" :current-node-id="currentNodeId" @handleCloseDialog="showDialog=false" @updateDepartment="getDepartmentList" />
    </el-dialog>

  </div>

</template>

<script>
import { delDepartment, getDepartment } from '@/api/departments'
import { transListToTreeData } from '@/utils'
// 2.封装并且导入子组件
import addOrEdit from './deptDialog.vue'

export default {
  name: 'Departments',
  // vue2中注册子组件
  components: {
    addOrEdit
  },
  data() {
    return {
      // 下面是假数据
      // departs: [
      //   // 默认找label属性,找children属性.所以使用props来指定对应关系
      //   {
      //     name: '总裁办',
      //     manager: '曹操',
      //     children: [{ name: '董事会', manager: '曹丕' }]
      //   },
      //   { name: '行政部', manager: '刘备' },
      //   { name: '人事部', manager: '孙权' }
      // ],
      // defaultProps: {
      //   label: 'name',
      //   children: 'children'
      // }
      // 这里根据接口来写代码
      departs: [],
      defaultProps: {
        label: 'name',
        // ?
        children: 'children'
      },
      showDialog: false,
      currentNodeId: null, // 存储当前点击的id
      type: 'add',
      title: {
        add: '添加部门',
        edit: '编辑部门'
      }
    }
  },
  async created() {
    // 花裤衩定制的规则,先写created再写methods
    await this.getDepartmentList()
    this.$message.success('获取组织架构列表成功')
  },
  methods: {
    handleClick(data, node) {
      // 打印出来的node包含data对象.data里面包含传入tree中的数据,里面有name,manager,children
      // console.log('data-', data, 'node-', node)
    },
    /**
     * 获取组织架构列表
     */
    async getDepartmentList() {
      const res = await getDepartment()
      // 打印结果发现这个后台返回的数据结构不是树形结构,里面没有children属性
      // 返回的数据结构:  id pid
      // 目前的任务将平铺数组转换成额树形结构

      console.log(res)
      // 优化-- 返回的第一条数据是公司名称,有问题,所以要删除
      // res.data.splice(0, 1)
      // this.departs = res.data
      // 调用转换树形结构的函数
      console.log(res.data)

      this.departs = transListToTreeData(res.data, 0)
      // console.log(this.departs)

      // this.departs = res.data.depts
      // this.company.name = res.data.companyName
    },
    handleShowDialog() {
      this.showDialog = true
    },
    async operateDept(type, id) {
      this.type = type
      if (type === 'add') {
        this.showDialog = true
        this.currentNodeId = id
      } else if (type === 'edit') {
        // 向子组件传值--更新props- 💕 异步动作
        // 直接💕 调用了子组件的方法 同步的方法
        // 要在子组件获取数据
        // 父组件调用子组件的方法来获取数据
        this.$nextTick(() => {
          this.$refs.addOrEdit.getDepartmentDetail() // this.$refs.addDept等同于子组件的this
        })
        // 编辑部门场景
        this.showDialog = true
        this.currentNodeId = id // 记录id 要用它获取数据
      } else {
        // 弹框提示是否确定删除
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delDepartment(id)

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getDepartmentList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    handleClose() {
      this.$refs.addOrEdit.close()
    }
  }
}

</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}

.el-tree {
  ::v-deep {

    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
